/*
 * @Author: yuanxiang 
 * @Date: 2018-05-11 16:58:42 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-11-17 11:08:49
 */
<template>
  <div>
    <!-- <out ref="myModel"></out> -->
    <el-tooltip content="首页" placement="top">
      <img class="screenfullImg" src="../../../static/img/home.png" @click="home" alt>
    </el-tooltip>
    <el-tooltip content="返回上一页" placement="top">
      <img class="screenfullImg" src="../../../static/img/return.png" @click="$router.go(-1)" alt>
    </el-tooltip>
    <el-tooltip content="点击放大或缩小" placement="top">
      <img
        v-if="isFullscreen"
        @click="click"
        class="screenfullImg"
        src="../../../static/img/Fullscreen.png"
        alt
      >
      <img
        v-if="!isFullscreen"
        @click="click"
        class="screenfullImg"
        src="../../../static/img/notFullscreen.png"
        alt
      >
    </el-tooltip>
    <el-tooltip content="退出登录" placement="top">
      <img class="screenfullImg" src="../../../static/img/user.png" @click="clickFun" alt>
    </el-tooltip>
    <el-tooltip content="修改密码" placement="top">
      <img
        class="screenfullImg"
        src="../../../static/img/modify.png"
        @click="clickChangePassword"
        alt
      >
    </el-tooltip>
  </div>
</template>

<script>
import screenfull from "screenfull";
import out from "@/components/model/index";
import router from "../../../src/router";
export default {
  name: "hamburger",
  props: {
    width: {
      type: Number,
      default: 22
    },
    height: {
      type: Number,
      default: 22
    },
    fill: {
      type: String,
      default: "#fff"
    }
  },
  components: {
    out
  },
  data() {
    return {
      isFullscreen: false,
      bool: true
    };
  },
  mounted() {
    if (!this.$utils.showPwdPage) {
      router.afterEach((to, from, next) => {
        this.$store.dispatch("ToggleSideBar", false);
      });
    }
  },
  methods: {
    // 修改密码
    clickChangePassword() {
      this.$modal.show("hello-world");
    },
    // 退出登陆
    clickFun() {
      this.$emit("getOut", this.data);
    },
    click() {
      if (screenfull.enabled === false) {
        this.$message({
          message: "you browser can not work",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle();
      screenfull.onchange(this.on());
    },
    on() {
      this.$set(this, "isFullscreen", !screenfull.isFullscreen);
      // if (screenfull.isFullscreen) {
      //   this.$store.dispatch("ToggleSideBar", true);
      // } else {
      //   // alert('over')
      //   this.$store.dispatch("ToggleSideBar");
      // }
    },
    home() {
      this.$router.push({ path: "/" });
    }
  }
};
</script>

<style scoped>
.screenfullImg {
  float: right;
  width: 55px;
  height: 55px;
  margin: 0 3px;
  display: inline-block;
  cursor: pointer;
  vertical-align: -0.15em;
}
</style>
